<template>
    <div>
        <Row class="leftMenu" >
            <Col span="24">
                <Menu :theme="theme" :accordion="true" :active-name="activeName" :open-names="openName" @on-select="getActive" ref="leftMenus" style="width: 100%;">
                  <Submenu v-for="i in leftData" :name="i.name">
                    <template slot="title">
                      <Icon :type="i.icon"></Icon>{{i.title}}
                    </template>
                    <router-link v-for="i in i.children" :to="i.url"><MenuItem :name="i.name">{{i.subTitle}}</MenuItem></router-link>
                  </Submenu>
                   <!-- <Submenu name="1">
                        <template slot="title">
                            <Icon type="icecream"></Icon>
                            优惠券
                        </template>
                        <router-link to="/couponsSend"><MenuItem name="1-1">发放优惠券</MenuItem></router-link>
                        <router-link to="/couponsList"><MenuItem name="1-2">优惠券列表</MenuItem></router-link>
                    </Submenu>
                    <Submenu name="2">
                        <template slot="title">
                            <Icon type="speakerphone"></Icon>
                            活动
                        </template>
                        <MenuItem name="2-1">发布活动</MenuItem>
                        <MenuItem name="2-2">活动列表</MenuItem>
                        <MenuItem name="2-3">添加活动位</MenuItem>
                        <MenuItem name="2-4">活动位列表</MenuItem>
                    </Submenu>
                    <Submenu name="3">
                        <template slot="title">
                            <Icon type="paper-airplane"></Icon>
                            消息
                        </template>
                        <router-link to="/messageSend"><MenuItem name="3-1">发消息</MenuItem></router-link>
                        <router-link to="/messageList"><MenuItem name="3-2">消息列表</MenuItem></router-link>
                    </Submenu>-->
                </Menu>
            </Col>
        </Row>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                theme: 'primary',
                activeName:'1-1',
                openName:["1"],
                leftData:[
                  {
                    name:1,
                    icon:'icecream',
                    title:'优惠券',
                    children:[
                      {name:'1-1',subTitle:'发放优惠券', url:'/couponsSend'},
                      {name:'1-2',subTitle:'优惠券列表', url:'/couponsList'}
                    ]
                  },
                  {
                    name:2,
                    icon:'speakerphone',
                    title:'活动',
                    children:[
                      {name:'2-1',subTitle:'发布活动', url:''},
                      {name:'2-2',subTitle:'活动列表', url:''},
                      {name:'2-3',subTitle:'添加活动位', url:''},
                      {name:'2-4',subTitle:'活动位列表', url:''}
                    ]
                  },
                  {
                    name:3,
                    icon:'paper-airplane',
                    title:'消息',
                    children:[
                      {name:'3-1',subTitle:'发消息',url:'/messageSend'},
                      {name:'3-2',subTitle:'消息列表', url:'/messageList'}
                    ]
                  },

                ]
            }
        },
      mounted:function () {

        this.activeName=localStorage.getItem('activeName');
        this.openName=JSON.stringify(localStorage.getItem('openName'));
        this.$nextTick(function () {
          this.$refs.leftMenus.updateOpened();
          this.$refs.leftMenus.updateActiveName();
        });
      },
      methods:{
        getActive(name){
          let arr=name.toString().split('-');

          localStorage.setItem('activeName',name);
          localStorage.setItem('openName',arr[0]);
        }
      }
    }
</script>
<style >
    a {
        color: #4a4b4c;
        background: 0 0;
        text-decoration: none;
        outline: 0;
        cursor: pointer;
        transition: color .2s ease;
    }
    .ivu-menu-vertical{width: 100%;height: 800px;background-color: #014f91;}
    .ivu-menu-vertical .ivu-menu-item, .ivu-menu-vertical .ivu-menu-submenu-title {
        padding: 14px 24px;
        position: relative;
        cursor: pointer;
        color: #fff;
        z-index: 1;
        transition: all .2s ease-in-out;
    }
    .ivu-menu .ivu-menu-submenu-title:hover{background-color: #cdcdcd;color: #555}
    .ivu-menu .ivu-menu-item:hover{background-color: #cdcdcd;color: #222;}
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
        color: #2d8cf0;
        border-right: 2px solid #2d8cf0;
        z-index: 2;
        background-color: #fff;
    }
</style>
